$inputHeight: 32px;
$inputRadius: 4px;
@mixin success () {
  border: 1px solid $success;
  padding-right: 32px;
  -webkit-box-shadow: 0 0 5px 0 rgba($success, 0.25);
  box-shadow: 0 0 5px 0 rgba($success, 0.25);
}

@mixin error () {
  border: 1px solid $danger;
  padding-right: 32px;
  -webkit-box-shadow: 0 0 5px 0 rgba($danger, 0.25);
  box-shadow: 0 0 5px 0 rgba($danger, 0.25);
}

@mixin warning () {
  border: 1px solid $warning;
  padding-right: 32px;
  -webkit-box-shadow: 0 0 5px 0 rgba($warning, 0.25);
  box-shadow: 0 0 5px 0 rgba($warning, 0.25);
}

@mixin search () {
  padding-right: 32px;
}

@mixin arrow () {
  padding-right: 32px;
}

@mixin status-disabled {
  background-color: $disabled !important;
  border-color: $outlines !important;
  color: $grey !important;
  cursor: not-allowed !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  @include unselect();
}

@mixin inputIcon () {
  display: block;
  @include iconfont();
  font-weight: bold;
  position: absolute;
  line-height: $inputHeight - 2px;
  padding: 0px 8px;
  background-color: $white;
  top: 1px;
  right: 1px;
  bottom: 1px;
  margin: auto;
  border-top-right-radius: $inputRadius;
  border-bottom-right-radius: $inputRadius;
}

.ma-input {
  position: relative;
  display: inline-block;
  .clear {
    @include inputIcon();
    cursor: pointer;
  }
  &[disabled] {
    .clear {
      background-color: $disabled;
      display: none;
    }
    .ma-select-multiple-result {
      /* background-color: transparent;*/
      /* @include status-disabled();*/
      &.has-selected {
        background-color: $disabled !important;
      }
    }
  }
}

.ma-input input,
.ma-input textarea,
textarea.ma-input,
input.ma-input {
  vertical-align: top;
  border: 1px solid $outlines;
  background-color: $white;
  color: $base;
  border-radius: $inputRadius;
  padding: 5px 10px;
  margin: 0;
  width: 240px;
  max-width: 100%;
  min-height: $inputHeight;
  line-height: $inputHeight - 12px;
  font-size: $font14;
  @include transition();
  &::-webkit-input-placeholder {
    color: $grey;
  }
  &:focus,
  &:hover {
    border-color: $grey;
  }
  &[disabled],
  &[disabled]:hover {
    @include status-disabled();
  }
  &[readonly],
  &[readonly]:hover {}
}

.ma-input {
  &[ng-disabled="true"] {
    &:before {
      display: none !important;
    }
  }
  &.ma-input-success {
    &:before {
      @include inputIcon();
      content: "\ee63";
      color: $success;
    }
    &[disabled]:before {
      background-color: $disabled;
      opacity: 0;
    }
    textarea,
    input {
      @include success();
    }
  }
  &.ma-input-error {
    &:before {
      @include inputIcon();
      content: "\ee64";
      color: $danger;
    }
    &[disabled]:before {
      background-color: $disabled;
      opacity: 0;
    }
    textarea,
    input {
      @include error();
    }
  }
  &.ma-input-warning {
    &:before {
      @include inputIcon();
      content: "\ee5e";
      color: $warning;
    }
    &[disabled]:before {
      background-color: $disabled;
      opacity: 0;
    }
    textarea,
    input {
      @include warning();
    }
  }
  &.ma-input-search-normal {
    &:before {
      @include inputIcon();
      content: "\eea3";
      color: $disabled;
    }
    &[disabled]:before {
      background-color: $disabled;
      color: $outlines;
    }
    textarea,
    input {
      @include search();
    }
  }
  &.ma-input-search-black {
    &:before {
      @include inputIcon();
      content: "\eea3";
      color: $base;
      background-color: $disabled;
      cursor: pointer;
    }
    &[disabled]:before {
      background-color: $disabled;
      cursor: default;
    }
    textarea,
    input {
      @include search();
    }
  }
  &.ma-input-arrow-down {
    &:before {
      @include inputIcon();
      @include transition();
      background-color: transparent;
      font-size: $font12;
      content: "\ee4e";
      color: $grey;
      padding: 0px 10px;
    }
    textarea,
    input {
      @include arrow();
    }
  }
  &.ma-input-arrow-up {
    &:before {
      @include inputIcon();
      @include transition();
      @include transform(rotate(180deg));
      background-color: transparent;
      font-size: $font12;
      content: "\ee4e";
      color: $grey;
    }
    textarea,
    input {
      @include arrow();
    }
  }
}

input.ma-input {
  &.ma-input-success {
    @include success();
  }
  &.ma-input-error {
    @include error();
  }
  &.ma-input-warning {
    @include error();
  }
}

.ma-input:focus {
  border-color: $grey;
}

.ma-input textarea,
textarea.ma-input {
  height: 120px;
  vertical-align: top;
}


/* input number */

.ma-input-number-box {
  display: inline-block;
}

.ma-input-number input {
  padding-right: 40px;
  width: 100px;
}

.ma-input-number .control {
  position: absolute;
  z-index: 2;
  right: 1px;
  top: 1px;
  width: 30px;
  text-align: center;
  border-left: 1px solid $outlines;
}

.ma-input-number .control > div {
  line-height: 15px;
  cursor: pointer;
  @include transition();
}

.ma-input-number .control > div:nth-child(1) {
  border-top-right-radius: 4px;
}

.ma-input-number .control > div:nth-child(2) {
  border-bottom-right-radius: 4px;
}

.ma-input-number .control > div:nth-child(1):before {
  position: relative;
  top: -11px;
  content: "";
  border: 4px solid #808080;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.ma-input-number .control > div:nth-child(2):before {
  position: relative;
  top: 11px;
  content: "";
  border: 4px solid #808080;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.ma-input-number .control > div:hover {
  background-color: #f5f5f5;
}

.ma-input-number .control > div:active {
  background-color: $disabled;
}

.ma-input-number .control[readonly="readonly"],
.ma-input-number .control[disabled="disabled"] {
  pointer-events: none;
}

.ma-input-number input[disabled]:hover {
  border-color: $disabled;
}

.ma-input.date-input[readonly] {
  background-color: initial;
}

.ma-input.date-input[disabled] {
  background-color: $disabled;
}

.ma-input-number[ng-readonly="true"] .control,
.ma-input-number[readonly] .control,
.ma-input-number[ng-disabled="true"] .control,
.ma-input-number[disabled] .control {
  display: none;
}

.ma-input-number[ng-disabled="true"],
.ma-input-number[disabled] {
  border-color: $outlines;
}

.ma-input-number[ng-disabled="true"] input,
.ma-input-number[disabled] input {
  background-color: $disabled;
}

.ma-input-number-box {
  &.ma-input-error {
    input {
      border-color: $danger;
    }
  }
  &.ma-input-success {
    input {
      border-color: $success;
    }
  }
}
